<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的书架</title>
    <style>
      /* 基础重置与全局样式 */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }

      body {
        background-color: #f8f9fa;
        color: #333;
        line-height: 1.6;
        padding: 20px 0;
      }

      /* 容器样式 */
      #app {
        width: 100%;
        max-width: 720px;
        margin: 0 auto;
        padding: 25px;
        background-color: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      }

      /* 标题样式 */
      h3 {
        text-align: center;
        line-height: 1.4;
        font-weight: 600;
        color: #2d3748;
        font-size: 32px;
        margin-bottom: 30px;
        position: relative;
      }

      h3::after {
        content: "";
        display: block;
        width: 60px;
        height: 3px;
        background-color: #4299e1;
        margin: 12px auto 0;
        border-radius: 3px;
      }

      /* 表单样式 */
      .form {
        display: flex;
        gap: 12px;
        margin: 0 0 35px;
        flex-wrap: wrap;
      }

      .form input {
        flex: 1;
        min-width: 240px;
        height: 48px;
        padding: 0 20px;
        border: 2px solid #e2e8f0;
        border-radius: 8px;
        font-size: 15px;
        color: #2d3748;
        transition: all 0.3s ease;
      }

      .form input:focus {
        border-color: #4299e1;
        outline: none;
        box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
      }

      .form input::placeholder {
        color: #a0aec0;
      }

      .form button {
        width: 100px;
        height: 48px;
        background-color: #4299e1;
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 15px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        white-space: nowrap;
      }

      .form button:hover {
        background-color: #3182ce;
        transform: translateY(-2px);
      }

      .form button:active {
        transform: translateY(0);
      }

      /* 列表样式 */
      .list {
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid #e2e8f0;
      }

      .list li {
        list-style: none;
        display: flex;
        align-items: center;
        padding: 0 25px;
        height: 70px;
        border-bottom: 1px solid #f7fafc;
        background-color: #fff;
        cursor: pointer;
        transition: background-color 0.2s ease;
      }

      .list li:hover {
        background-color: #f7fafc;
      }

      .list li:last-child {
        border-bottom: none;
      }

      .list li span {
        flex: 2;
        color: #2d3748;
        font-size: 16px;
      }

      .list li span:first-child {
        font-weight: 500;
        color: #2b6cb0;
      }

      .list li button {
        width: 80px;
        height: 36px;
        background-color: #e53e3e;
        color: #fff;
        border: none;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        flex: 0 0 auto; /* 固定宽度，不参与弹性拉伸 */
      }

      .list li button:hover {
        background-color: #c53030;
      }

      .list li button:active {
        transform: scale(0.98);
      }

      /* 响应式适配（移动端） */
      @media (max-width: 576px) {
        #app {
          padding: 15px;
          margin: 10px;
        }

        h3 {
          font-size: 26px;
          margin-bottom: 20px;
        }

        .form {
          gap: 10px;
          margin-bottom: 25px;
        }

        .form input {
          min-width: 0;
          width: 100%;
          height: 44px;
        }

        .form button {
          width: 100%;
          height: 44px;
        }

        .list li {
          padding: 0 15px;
          height: 65px;
        }

        .list li span {
          font-size: 15px;
        }

        .list li button {
          width: 70px;
          height: 32px;
          font-size: 13px;
        }
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h3>我的书架</h3>
      <div class="form">
        <input
          type="text"
          class="add"
          v-model="bookName"
          placeholder="请输入书名（例如：《三体》）"
        />       
        <input
          type="text"
          class="add"
          v-model="author"
          placeholder="请输入作者（例如：刘慈欣）"
        />
        <button @click="add">添加</button>
      </div>

      <ul class="list">
        <li v-for="(item, index) in booksList"   @click="deleteBook(item.id)" :key="item.id">
          <span>{{ item.name }}</span>

          <span>{{ item.author }}</span>

          <button>删除</button>
        </li>
      </ul>
    </div>

    <script src="vue3.js"></script>
    <script>
      const { createApp, ref } = Vue;
      const app = createApp({
        setup() {
          const booksList = ref([
            { id: 1, name: "《红楼梦》", author: "曹雪芹" },
            { id: 2, name: "《西游记》", author: "吴承恩" },
            { id: 3, name: "《水浒传》", author: "施耐庵" },
            { id: 4, name: "《三国演义》", author: "罗贯中" },
          ]);
          // 新增逻辑 
      
          const bookName = ref("");
          const author = ref("");
          const add = () =>{
            // 添加逻辑
            booksList.value.push({
              // id用于后面的删除逻辑
              id: booksList.value.length + 1,
              // 书名
              name: bookName.value,
              // 作者
              author: author.value,
            });
            // 清空输入框
            bookName.value = "";
            author.value = "";
          }


          const deleteBook = (id) =>{
            // 删除逻辑
            booksList.value = booksList.value.filter((item) => item.id !== id);
          }

          return { booksList, bookName,author, add, deleteBook };
        },
      });
      app.mount("#app");
    </script>
  </body>
</html>
